<template>
<view>	
	<u-navbar :is-back="false" title="领货/还库单审核"
	  title-size="30"
	  :background="{background:'#2B88FE' }"
	  title-color="#fff">
	  <div class="head_icon">
	    <u-icon @click="$api.handleBackTo"
	      name="arrow-left" color="#fff"
	      size="36">
	    </u-icon>
	    <u-icon @click="$api.handleHomeTo"
	      name="home" color="#fff" size="36">
	    </u-icon>
	  </div>
	</u-navbar>
  <div  class="app-draw-record">
    <div class="draw-head">
      <u-input
        v-model="search"
        :border="true" />
    </div>
    <u-empty text="暂无数据"
      mode="list"
      v-if="!clist.length">
    </u-empty>
    <view class="draw-content"   v-for="(item,index) in clist" :key="index">
      <view
        class="u-flex u-between">
        <view>
          <view>
            {{item.fUpdateTime}}
            {{item.fUserName}}
            {{item.fCarNo}}
          </view>
          <view
            :class="item.fStatus==1?'text-red':'text-blue'">  
			 {{$api.getPassStatus(item.fStatus)}}
          </view>
        </view>
        <div>

          <u-button
            size="mini"
            type="success"
            @click="$api.navigator(`/pages/stock/ProCha/Detail?id=${item.fId}&state=${state}`)">
            查看
          </u-button>
        </div>

      </view>
      <appProduct
        v-for="(v,i) in item.ProList"
        :key="i" :li="v"
        @detailUrl="$api.navigator('/pages/sale/my_product_item?id='+v.id)">
      </appProduct>
      <u-empty text="暂无数据"
        mode="list"
        v-if=" !item.ProList.length">
      </u-empty>
    </view>
  </div>
</view></template>

<script>
import appProduct from '@/components/app-product'
export default {
  components: {
    appProduct
  },
  data() {
    return {
	  str: '',
      page: 1,
      isAllList: true,
      state: 1,
      date: '',
      search: '',
      clist: [],
	  NowKey:''
    }
  },
  onLoad(e) {
    let state = e.state
    this.state = state
    if (state == 2) {
	  this.str='领货单审核'
      uni.setNavigationBarTitle({
        title: '领货单审核'
      })
	  this.NowKey='领取数量'
    } else if (state == 1) {
	 this.str='还库单审核'
      uni.setNavigationBarTitle({
        title: '还库单审核'
      })
	   this.NowKey='归还数量'
    } else {
	  this.str='退换货审核'
      uni.setNavigationBarTitle({
        title: '退换货审核'
      })
	    this.NowKey='退换数量'
    }
  },
  onShow() {
    this.date = new Date().toLocaleDateString().replace(/\//g, '-')
    this.defaultData(() => {
      this.getclist()
    })
  },
  onReachBottom() {
    if (!this.isAllList) return
    this.page += 1
    this.getclist()
  },
  methods: {
    defaultData(cb) {
      this.page = 1
      this.clist = []
      this.isAllList = true
      cb && cb()
    },
    getclist() {
      let info = { InOut: this.state, Type: 2, Status: 0, Key: this.search }
      this.$axios('api/ProInAndOut/ManageListPaged', 'post', { PageIndex: this.page, value: info }).then(res => {
        if (!res.Value.List.length) {
          return (this.isAllList = false)
        }
        res.Value.List.forEach(x => {
          x.ProList = x.ProList.map(v => ({
            avatar: this.$api.OrderImg(v.fProId),
            gname: v.fProName,
            id: v.fProId,
            details: [
              { label: this.NowKey, value: v.fCount },
			  { label: '单位', value: v.fUnit } 
            ]
          }))
        })

        this.clist.push(...res.Value.List)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.draw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  u-button,
  u-input {
    width: 45%;
  }
}
.draw-content {
  .date {
    padding-top: 32rpx;
    span + span {
      margin-left: 10rpx;
    }
  }
  padding: 0 20rpx;
}
.text-red {
  color: red;
}
.text-blue {
  color: blue;
}
</style>